<template>
  <transition :name="direction+'-drawer'">
    <div class="yd-drawer-wrapper" v-show="visible" @click.self="modalClose">
      <div class="yd-drawer" :style="[{width},direction=='right'?{right:'10vw'}:{left:'10vw'}]">
        <div class="_header">
          <slot name="title">
            <span class="drawer-title">{{title}}</span>
          </slot>
          <button class="drawer-close-btn" @click="handleClose"></button>
        </div>
        <div class="_body">
          <slot></slot>
        </div>
        <div class="_footer" v-if="$slots.footer">
          <slot name="footer"></slot>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import { watch } from "vue";
export default {
  name: "yd-drawer",
  props: {
    direction: {
      type: String,
      default: "right"
    },
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: "标题"
    },
    width: {
      type: String,
      default: "35%"
    },
    closeOnClickModal: {
      type: Boolean,
      default: true
    }
  },
  setup(props, ctx) {
    const handleClose = () => {
      ctx.emit("update:visible", false);
    };
    const modalClose = () => {
      props.closeOnClickModal && ctx.emit("update:visible", false);
    };

    watch(
      () => props.visible,
      val => {
        if (!val) {
          ctx.emit("closed");
        }
      }
    );

    return {
      handleClose,
      modalClose
    };
  }
};
</script>

<style lang="scss" scoped>
.yd-drawer-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 0 0 -10vw;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2001;
  width: 120vw;
  min-height: 120vh;
  .yd-drawer {
    position: absolute;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    width: 35%;
    height: 100vh;
    ._header {
      padding: 20px 20px 10px;
      .drawer-title {
        line-height: 24px;
        font-size: 18px;
        color: #333;
      }
      .drawer-close-btn {
        position: absolute;
        top: 20px;
        right: 20px;
        padding: 4px;
        border: none;
        outline: none;
        font-size: 16px;
        line-height: 16px;
        background: transparent;
        cursor: pointer;
      }
      .drawer-close-btn::before {
        content: "\2716";
        color: #666;
      }
    }
    ._body {
      padding: 20px;
      color: #666;
      font-size: 14px;
      word-break: break-all;
    }
    ._footer {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      text-align: center;
      padding: 10px 20px 20px;
      margin: auto;
      box-sizing: border-box;
    }
  }
}

//动画
.left-drawer-enter-active {
  animation: left 0.2s;
}
.left-drawer-leave-active {
  animation: left 0.2s reverse;
}

@keyframes left {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
//动画
.right-drawer-enter-active {
  animation: right 0.2s;
}
.right-drawer-leave-active {
  animation: right 0.2s reverse;
}

@keyframes right {
  0% {
    opacity: 0;
    transform: translateX(20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
</style>